<template>
  <div>
    <el-form-item label="订单号">
      <el-input v-model="orderId" placeholder="请输入订单号"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="search()">搜索</el-button>
      <el-button @click="reset()">重置</el-button>
    </el-form-item>
    <el-table v-if="userServiceNopay && userServiceNopay.list && userServiceNopay.list.length"
      :data="userServiceNopay.list">
      <el-table-column prop="orderId" label="订单号" />
      <el-table-column prop="serviceDetail" label="服务详情">
        <template #default="scope">
          <div v-if="scope.row.serviceDetail">
            <div v-if="parsedDetail = parseServiceDetail(scope.row.serviceDetail)">
              服务编号: {{ parsedDetail.serviceId }} <br />
              商家编号: {{ parsedDetail.shopId }} <br />
              服务名: {{ parsedDetail.serviceName }} <br />
              服务价格: {{ parsedDetail.servicePrice }} <br />
              服务描述: {{ parsedDetail.details }} <br />
              必需品: {{ parseServiceItems(parsedDetail.serviceItems) }} <br />
              工时: {{ parsedDetail.estimatedTime }} <br />
              服务条款: {{ parsedDetail.terms }} <br />
              流程信息: {{ parseProcesses(parsedDetail.serviceProcesses) }} <br />
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="totalAmount" label="支付价格" />
      <el-table-column prop="appointmentTime" label="预约时间" />
      <el-table-column prop="remark" label="备注" />
    </el-table>
    <div v-else>
      <p>暂无支付记录</p>
    </div>
  </div>
</template>

<script>
import { ElLoading } from 'element-plus'; // 导入 Loading 组件

export default {
  name: '',
  data() {
    return {
      userServiceNopay: {},
      searchServiceNopayForm: {},
      orderId: '',
      searchForm: {},
      intervalId: null,
      loadingInstance: null, // 加载实例
    }
  },

  methods: {
    startPolling() {
      this.intervalId = setInterval(() => {
        this.findServiceNopay();
      }, 60000);
    },
    stopPolling() {
      clearInterval(this.intervalId);
    },

    parseServiceDetail(serviceDetail) {
      try {
        const detail = JSON.parse(serviceDetail);
        detail.serviceItems = detail.serviceItems ? JSON.parse(detail.serviceItems) : [];
        detail.serviceProcesses = detail.serviceProcesses ? JSON.parse(detail.serviceProcesses) : [];
        return detail;
      } catch (error) {
        console.error('解析 serviceDetail 时出错:', error);
        return {};
      }
    },
    parseServiceItems(serviceItems) {
      if (!serviceItems || serviceItems.length === 0) {
        return '无';
      }
      return serviceItems.map(item => {
        return `服务编号: ${item.itemsId}, 数量: ${item.quantity}, 单价: ${item.unitPrice}`;
      }).join(', ');
    },
    parseProcesses(processes) {
      if (!processes || processes.length === 0) {
        return '无';
      }
      return processes.map(item => {
        return `流程编号: ${item.processesId}, 工时: ${item.workingHours}, 单价: ${item.unitPrice}`;
      }).join(', ');
    },

    search() {
      this.$http.get("/order/order/getOrderDetailShop").then(resp => {
        this.userServiceNopay = resp.data.data;
      })
    },
    reset() {
      this.findServiceNopay();
    },
    findServiceNopay() {
      // 参数校验
      if (this.searchServiceNopayForm.pageNo <= 0) {
        this.$message.error("页码必须大于 0");
        return;
      }
      if (this.searchServiceNopayForm.pageSize <= 0) {
        this.$message.error("每页大小必须大于 0");
        return;
      }

      // 显示 loading 状态
      this.loadingInstance = ElLoading.service({ text: '加载中...' });

      this.$http.get("/order/order/getNoPayShop", {
        params: {
          pageNo: this.searchServiceNopayForm.pageNo,
          pageSize: this.searchServiceNopayForm.pageSize,
        }
      })
      .then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message);
          this.userServiceNopay = res.data.data;
        } else {
          this.$message.error(res.data.message);
        }
      })
      .catch(error => {
        this.$message.error("请求失败，请稍后重试");
        console.error(error);
      })
      .finally(() => {
        // 隐藏 loading 状态
        this.loadingInstance.close();
      });
    }
  },

  mounted() {
    this.findServiceNopay();
    this.startPolling(); // 开始轮询
  },
  beforeUnmount() {
    this.stopPolling(); // 组件卸载前清理定时器
  }
}
</script>

<style scoped>
/* General styles */
body {
  font-family: Arial, sans-serif;
}

/* Form styles */
.el-form-item {
  margin-bottom: 20px;
}

.el-input {
  width: 300px;
}

/* Button styles */
.el-button {
  margin-right: 10px;
}

.el-button:hover {
  background-color: #f0f0f0;
  border-color: #dcdcdc;
}

/* Table styles */
.el-table {
  border: 1px solid #dcdcdc;
}

.el-table th,
.el-table td {
  padding: 15px;
  text-align: left;
  border-bottom: 1px solid #eaeaea;
}

.el-table th {
  background-color: #f9f9f9;
  font-weight: bold;
}

.el-table tr:nth-child(even) {
  background-color: #f7f7f7;
}

.el-table tr:hover {
  background-color: #ececec;
}

/* No records message */
p {
  text-align: center;
  color: #888;
  margin-top: 20px;
}
</style>